<template>
    <div class="flex-row useCase-body">

        <FullHeadImg :backImage="useCase.head.headBg">
        </FullHeadImg>

        <section class="case-head body-m">
            <h2>{{ useCase.head.title }}</h2>
            <p>{{ useCase.head.desc }}</p>
        </section>

        <section class="case-challenge body-m">
            <h2>{{ useCase.challenges.title }}</h2>
            <p v-if="useCase.challenges.desc">{{ useCase.challenges.desc }}</p>
            <div class="challenge-cards">
                <div class="gradient-card" v-for="(item, idx) in useCase.challenges.items" :key="idx">
                    <img v-if="item.icon" :src="getImage(item.icon)" alt="">
                    <h4 v-if="item.title">{{ item.title }}</h4>
                    <div class="card-descs">
                        <p v-for="(desc, idx) in item.descs" :key="idx">{{ desc }}</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="hy-solution full-bg">
            <div class="solution-body body-m">
                <h2>{{ useCase.solution.title }}</h2>
                <section v-for="(item, idx) in useCase.solution.solutions" :key="idx">
                    <h4>{{ item.title }}</h4>
                    <div class="solution-desc" v-if="item.descs">
                        <p v-for="(desc, idx) in item.descs" :key="idx">{{ desc }}</p>
                    </div>
                    <ul>
                        <li v-for="(li, idx) in item.list" :key="idx">{{ li }}</li>
                    </ul>
                </section>

                <div class="benefit-solution" v-if="useCase.solution.other">
                    <div v-if="useCase.solution.other.descs">
                        <p v-for="(desc, idx) in useCase.solution.other.descs">{{ desc }}</p>
                    </div>
                    <ul>
                        <li v-for="(li, idx) in useCase.solution.other.list">{{ li }}</li>
                    </ul>
                </div>
            </div>
        </section>

        <section class="flex-row other-cards body-m">
            <div class="gradient-card" v-for="(item, idx) in useCase.otherCards" :key="idx">
                <h4 v-if="item.title">{{ item.title }}</h4>
                <p v-for="(desc, idx) in item.descs">{{ desc }}</p>
            </div>
        </section>

        <section v-if="useCase.useCases" class="client-case body-m">
            <h2>{{ useCase.useCases.title }}</h2>
            <p v-if="useCase.useCases.desc">{{ useCase.useCases.desc }}</p>
            <div class="client-case-items" v-if="useCase.useCases.cases">
                <div class="flex-row client-case-item" v-for="(item, idx) in useCase.useCases.cases" :key="idx">
                    <img v-if="item.icon" :src="getImage(item.icon)" alt="">
                    <p>{{ item.desc }}</p>
                </div>
            </div>
        </section>

        <section v-if="useCase.otherSolution" class="other-solution body-m">
            <h2>{{ useCase.otherSolution.title }}</h2>
            <ul>
                <li v-for="(desc, idx) in useCase.otherSolution.solutions" :key="idx">{{ desc }}</li>
            </ul>
        </section>

        <section></section>
    </div>
</template>

<script setup lang="ts" name="useCase">

const props = defineProps<{ useCase: UserCase }>()

const useCase = computed(() => {
    return props.useCase
})

import { type UserCase } from '@/utils/useCaseConfig'
import { computed } from 'vue';

</script>

<style scoped lang="scss">
.useCase-body {
    flex-direction: column;
}

h2 {
    white-space: pre-line;
}

.case-head {
    p {
        padding-top: 2rem;
    }
}

.case-challenge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    .challenge-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;

        .gradient-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;

            img {
                width: 50px;
            }

            .card-descs {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.8rem;
            }
        }
    }
}

.hy-solution {
    background-color: #f3d03b;
    padding: 2rem 0;

    .solution-body {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        .solution-desc {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        section {
            ul {
                list-style-type: disc;
                list-style-position: inside;
                padding-bottom: 2rem;
                border-bottom: 1px solid black;
            }
        }
    }

    .solution-body>section:last-of-type>ul {
        border-bottom: none;
        padding-bottom: 0;
    }

    .benefit-solution {
        padding: 2rem;
        background-color: white;
        border-radius: 2rem;
        margin-bottom: 2rem;

        ul {
            list-style-type: disc;
            list-style-position: inside;
        }
    }
}

.other-cards {
    gap: 2rem;
}

.client-case {

    h2 {
        padding-bottom: 2rem;
    }

    .client-case-items {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .client-case-item {
            gap: 2rem;
            align-items: center;

            img {
                height: 50px;
                width: 50px;
            }

            p {
                line-height: 1.5;
            }
        }
    }
}

.other-solution {
    h2 {
        padding-bottom: 2rem;
    }

    ul {
        list-style-type: disc;
        list-style-position: inside;
    }
}

@media (max-width: 650px) {
    .case-challenge .challenge-cards {
        grid-template-columns: repeat(1, 1fr);
    }

    .client-case .client-case-items {
        gap: 2rem;

        .client-case-item {
            gap: 1rem;
        }
    }
}
</style>